<div id="tab-wrapper">
<div>
	<p>Create your own workflow. You can use Default Workflow 01 or Default Workflow 02 for reference.<div id="workflow-select-div"></div></p>
	<div id="active-workflow-notification">Default Workflow 2 is active</div>
	<div id="workflow-data-div">
		<h3><div id="workflow-mgmt-title">&nbsp;</div></h3>
		<div id="activate-workflow"></div>
		<hr />
		<div id="screen-div-parent2"></div>
		<div style="clear: both;">&nbsp;</div>

	</div>
	<div id="resultText">&nbsp;</div>
	<div>
		<button id="saveButton">Save</button>
	</div>
</div>

</div>
<script type="text/javascript">
function getHeadText(screen){

	var txt='<div class="droppable ui-widget-header" id="element '+screen+'">';
	txt=txt+'<p>Screen '+(screen+1)+'</p>';
	txt=txt+'<ul id="ul-screen-'+(screen+1)+'" key="'+(screen+1)+'" class="sortable boxy">';

	return txt;
};

function getTailText(){

	var txt='</ul></div>';
	return txt;
};
function reloadworkflowdiv(){
	 $.getJSON('<?php print base_url(); ?>getdata/workflow/allworkflows ', function(data) {
			var text='<select id="workflow-dropdown"><option value=-1>--SELECT WORKFLOW--</option>';
			$.each(data,function(key,val){
				console.log(key);
				text=text+'<option value='+val["workflow_id"]+'>'+val["workflow_name"]+'</option>';
			});
			text=text+'<option value=0>--CREATE NEW WORKFLOW--</option></select>';

			
			$('#workflow-select-div').html(text);

			 associateWorkflowActions();
	 });
	
}


function associateWorkflowActions(){
	 $('#workflow-dropdown').change(function(){

			$('#workflow-test-div-data').html('');

		 if($(this).val() > 0 ){
				var dataString='&wfid='+$(this).val();
				var wfid=$(this).val();
				$.ajax({
					type: "POST",
						url: "<?php print base_url(); ?>getdata/workflow/workflow",
						data: dataString,
						dataType : 'json',
						success : function(data){
							 if(data.error == 1){
								 $('#workflow-mgmt-title').html('Workflow not present.');
							 }else{
							
							 $('#workflow-mgmt-title').html("<span key="+data['workflow_service_id']+">"+data['workflow_name']+"</span>");

							 $('#workflow-mgmt-title').attr("title",data['workflow_name']);
							 $('#workflow-mgmt-title').attr("key",data['workflow_service_id']);
							 
					 		 var screen=0;
					 		 htmltext='<div class="droppable2 ui-widget-header" id="element 0">';
					 		htmltext=htmltext+'<p>Unused services</p>';
					 		htmltext=htmltext+'<ul id="ul-screen-0" key="0" class="sortable boxy">';
					 		var list = document.getElementById("one");
					 		

					 		 htmltag=$('#screen-div-parent2');

					 	 	 
							 $.each(data['service_array'], function(key, val) {

						    	 if(screen == val['screen_position']){

									 htmltext=htmltext+'<li pkey='+val['ws_id']+' key='+val['service_id']+'>'+val['descr']+'</li>';
								 }else if( screen+1 == val['screen_position']){

									 //Add the tail
									 htmltext=htmltext+getTailText();
						
									 htmltext = htmltext + getHeadText(screen);
									 screen++;

									 htmltext=htmltext+'<li pkey='+val['ws_id']+' key='+val['service_id']+'>'+val['descr']+'</li>';
								 }
								 	
							 });
							 htmltag.html(htmltext);

							 $('#activate-workflow').html('<button wfid="'+wfid+'" id="activate-workflow-btn">Make this active</button>');
							 associateEventsToButton();
							 
							 var i=0;
							 for(i=0;i<=6;i++){
								 list = document.getElementById("ul-screen-"+i);
								 DragDrop.makeListContainer( list );
							 };
						}

						}
				});

			}else if($(this).val()== 0) {
					var text='<h3>Create a new workflow</h3><hr><p><label>Workflow Name</label>'
						+'<input type="text" id="workflow-name-input"/></p><button id="wfnameaddbtn">Add</button>';
						var name=prompt("Please enter the workflow name","Workflow");
						var dataString='&wfname='+name;
						if(name!=null && name!=''){
							var htmltext=$('#workflow-select-div select').html();
				    		$.ajax({
							type: "POST",
								url: "<?php print base_url(); ?>tabcontroller/createworkflow",
								data: dataString,
								success : function(data){
									console.log(data);
									reloadworkflowdiv();
								}
						    }); 

						   
						}
					
			}

				
	 });

}

function associateEventsToButton(){

	 $('#activate-workflow-btn').button().click(function(e){
		 var dataString='&wfid='+$(this).attr('wfid');
		$.ajax({
			type: "POST",
				url: "<?php print base_url(); ?>tabcontroller/makeThisActive",
				data: dataString,
				success : function(data){
					console.log(data);
					reloadworkflowdiv();
					getActiveWorkFlow();
				}
		    }); 
	 });


}

function getActiveWorkFlow(){
	$.ajax({
		type: "POST",
			url: "<?php print base_url(); ?>tabcontroller/getActiveWorkflow",
			success : function(data){
				$('#active-workflow-notification').html('Workflow - '+data+' is active');
			}
	    }); 
	
}
$(document).ready(function(){

	reloadworkflowdiv();
	getActiveWorkFlow();

	 $('#saveButton').button().click(function(){

			console.log("Button clicked");
			var workFlowArray={};
			var servicesArray=new Array();
			$('ul.sortable').each(function(){
				var ulTag=$(this);
				
				var i=0;
				ulTag.children().each(function(){
					var service={};
					service['ws_id']=$(this).attr('pkey');
					service['service_id']=$(this).attr('key');
					service['descr']=$(this).html();
					service['screen_position']=ulTag.attr('key');
					service['screen_order']=i+1;
					servicesArray[$(this).attr('key')]=service;
					console.log($(this).attr('key')+"--"+$(this).html()+" :: "+ulTag.attr('key')+" :: "+(i+1));
					i++;
				});
			});

			
			workFlowArray['workflow_name']=$('#workflow-mgmt-title').attr("title");
			workFlowArray['workflow_service_id']=$('#workflow-mgmt-title').attr("key");
			workFlowArray['service_array']=servicesArray;
			console.log(JSON.stringify(workFlowArray));
			var dataString='&arrayString='+JSON.stringify(workFlowArray);

			$.ajax({
				type: "POST",
					url: "<?php print base_url(); ?>welcome/testPost",
					data: dataString,
					success : function(data){
						alert(data);
					}
			});
			
		});	 

});
</script>

<div style="clear: both;">&nbsp;</div>


</div>